// 我的考试页面
<template>
  <div id="myExam">
    <div class="title">我收藏的试卷列表</div>
    <section class="content-el">
      <el-table ref="filterTable" :data="collectList" v-loading="loading" @expand-change="changeExpand">
        <el-table-column type="expand" label="点击查看详情" width="120">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item>
                <h3 style="margin-left: 50px">{{ props.row.source }}<i class="header-icon el-icon-info"></i></h3>
                <span class="time">{{ examData.totalScore }}分 / {{ examData.totalTime }}分钟</span>
              </el-form-item>
              <el-form-item>
                <el-collapse class="inner">
                  <el-collapse-item>
                    <template slot="title" name="1">
                      <div class="titlei">选择题 (共{{ topicCount[0] }}题 共计{{ score[0] }}分)</div>
                    </template>
                    <div class="contenti">
                      <ul class="question" v-for="(list, index) in topic[1]" :key="index">
                        <li>{{ index + 1 }}. {{ list.question }} {{ list.score }}分</li>
                      </ul>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title" name="2">
                      <div class="titlei">填空题 (共{{ topicCount[1] }}题 共计{{ score[1] }}分)</div>
                    </template>
                    <div class="contenti">
                      <ul class="question" v-for="(list, index) in topic[2]" :key="index">
                        <li>{{ topicCount[0] + index + 1 }}.{{ list.question }} {{ list.score }}分</li>
                      </ul>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item>
                    <template slot="title" name="3">
                      <div class="titlei">判断题 (共{{ topicCount[2] }}题 共计{{ score[2] }}分)</div>
                    </template>
                    <div class="contenti">
                      <ul class="question" v-for="(list, index) in topic[3]" :key="index">
                        <li>{{ topicCount[0] + topicCount[1] + index + 1 }}. {{ list.question }} {{ list.score }}分</li>
                      </ul>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="examCode"
          label="试卷id"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag type="info">{{ scope.row.examCode }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="source"
          label="试卷名称"
          sortable
          :filters="filter"
          :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag type="danger">{{ scope.row.source }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="collectDate"
          label="收藏时间"
          sortable
          column-key="answerDate"
          :filters="filter"
          :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.collectDate }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button @click="cancle(scope.row.examCode)" type="text" size="small">取消收藏</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[4,6,8,10]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </el-row>
    </section>
    <div class="wrapper">


    </div>
  </div>
</template>

<script>
export default {
  name: 'myCollect',
  data() {
    return {
      loading: false,
      key: null, //搜索关键字
      allExam: null, //所有考试信息
      pagination: { //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6 //每页条数
      },
      collectList: [],
      activeName: '0',  //默认打开序号
      topicCount: [],//每种类型题目的总数
      score: [],  //每种类型分数的总数
      topic: {  //试卷信息

      },
    }
  },
  created() {
    this.searchCollectList()
  },
  // watch: {

  // },
  methods: {
    //初始化页面数据
    changeExpand(row, expandRows) {
      console.log('row', row)
      console.log('expandRows', expandRows)
      if (expandRows.length > 0) {
        let examcode = row.examCode
        this.init(examcode)
      } else {
        let examcode = 0
      }
    },

    init(examCode) {
      this.$axios(`/api/exam/${examCode}`).then(res => {  //通过examCode请求试卷详细信息
        res.data.data.examDate = res.data.data.examDate.substr(0, 10)
        this.examData = {...res.data.data}
        let paperId = this.examData.paperId
        this.$axios('/api/paper/', {params: {'paperId': paperId} }).then(res => {  //通过paperId获取试题题目信息
          this.topic = {...res.data}
          let keys = Object.keys(this.topic) //对象转数组
          keys.forEach(e => {
            let data = this.topic[e]
            this.topicCount.push(data.length)
            let currentScore = 0
            for (let i = 0; i < data.length; i++) { //循环每种题型,计算出总分
              currentScore += data[i].score
            }
            this.score.push(currentScore) //把每种题型总分存入score
          })
        })
      })
    },
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val
      this.searchCollectList()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.searchCollectList()
    },
    searchCollectList() {
      this.$axios({
        url: `/api/collectionList/${this.pagination.current}/${this.pagination.size}`,
        method: 'get',
        params: {'studentId': 123456}
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.collectList = res.data.data.records
          this.timeReverse()
        } else {
          this.$message({
            message: '查询我的收藏列表失败！',
            type: 'error'
          })
        }
      })
    },
    // 时间格式化
    msToDate(msec) {
      const datetime = new Date(msec)
      const year = datetime.getFullYear()
      const month = datetime.getMonth()
      const date = datetime.getDate()
      const hour = datetime.getHours()
      const minute = datetime.getMinutes()
      const second = datetime.getSeconds()
      const result1 = year
        + '-'
        + ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1))
        + '-'
        + ((date + 1) < 10 ? '0' + date : date)
        + ' '
        + ((hour + 1) < 10 ? '0' + hour : hour)
        + ':'
        + ((minute + 1) < 10 ? '0' + minute : minute)
        + ':'
        + ((second + 1) < 10 ? '0' + second : second)

      const result2 = year
        + '-'
        + ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1))
        + '-'
        + ((date + 1) < 10 ? '0' + date : date)

      const result = {
        hasTime: result1,
        withoutTime: result2
      }
      return result
    },
    timeFormatSeconds(time) {
      const d = time ? new Date(time) : new Date()
      const year = d.getFullYear()
      let month = d.getMonth() + 1
      let day = d.getDate()
      let hours = d.getHours()
      let min = d.getMinutes()
      let seconds = d.getSeconds()

      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      if (hours < 0) hours = '0' + hours
      if (min < 10) min = '0' + min
      if (seconds < 10) seconds = '0' + seconds

      return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds)
    },
    timeReverse() {
      for (const item in this.collectList) {
        this.collectList[item]['collectDate'] = this.msToDate((this.collectList[item]['collectDate'])).hasTime
      }
    },
    cancle(examCode) {
      this.$axios({
        url: '/api/cancelCollection/',
        method: 'post',
        data: {'examCode': examCode, 'studentId': 123456}
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message({
            message: '取消收藏成功！',
            type: 'success'
          });
          this.searchCollectList()
        } else {
          this.$message({
            message: '取消收藏失败！',
            type: 'error'
          })
        }
      })
    },
    detail(examCode) {
      //跳转到试卷详情页
      this.$router.push({path: '/examMsg', query: {examCode: examCode}})
      console.log(examCode)
    }
  }

}
</script>


<style lang="scss" scoped>
.pagination {
  padding: 20px 0px 30px 0px;

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}

.paper {
  h4 {
    cursor: pointer;
  }
}

.paper .item a {
  color: #000;
}

.wrapper .top .order {
  cursor: pointer;
}

.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.item .info i {
  margin-right: 5px;
  color: #0195ff;
}

.item .info span {
  margin-right: 14px;
}

.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}

.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}

.paper .item .info {
  font-size: 14px;
  color: #88949b;
}

.paper .item .name {
  font-size: 14px;
  color: #88949b;
}

.paper * {
  margin: 20px 0;
}

.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}

.top .icon {
  position: relative;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

#myExam .search-li {
  margin-left: auto;
}

.top .search-li {
  margin-left: auto;
}

.top li {
  display: flex;
  align-items: center;
}

.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

.wrapper .top {
  display: flex;
}

.wrapper .top li {
  margin: 20px;
}

#myExam {
  width: 980px;
  margin: 0 auto;
}

#myExam .title {
  margin: 20px;
}

#myExam .wrapper {
  background-color: #fff;
}

.wrapper .top .order {
  cursor: pointer;
}

.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.item .info i {
  margin-right: 5px;
  color: #0195ff;
}

.item .info span {
  margin-right: 14px;
}

.paper .item {
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}

.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45)
}

.paper .item .info {
  font-size: 14px;
  color: #88949b;
}

.paper .item .name {
  font-size: 14px;
  color: #88949b;
}

.paper * {
  margin: 20px 0;
}

.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}

.top .icon {
  position: relative;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
}

#myExam .search-li {
  margin-left: auto;
}

.top .search-li {
  margin-left: auto;
}

.top li {
  display: flex;
  align-items: center;
}

.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

.wrapper .top {
  display: flex;
}

.wrapper .top li {
  margin: 20px;
}

#myExam {
  width: 980px;
  margin: 0 auto;
}

#myExam .title {
  margin: 20px;
}

#myExam .wrapper {
  background-color: #fff;
}

.inner .contenti .question {
  margin-left: 40px;
  color: #9a9a9a;
  font-size: 14px;
}

.inner .titlei {
  margin-left: 20px;
  font-size: 16px;
  color: #88949b;
  font-weight: bold;
}

.time {
  font-size: 16px;
  margin-left: 50px;
  color: #999;
}
</style>
